<template>
  <!-- 表格模块 -->

  <!-- // ---------- 表格 ----------
      comTableList: [
        {
          id: 1,
          name: '张三张三张三张三张三张三张三张三张三张三',
          tel: 138888888,
          status: 1,
        },
        {
          id: 2,
          name: '李四',
          tel: 137777777,
          status: 1,
        },
        {
          id: 3,
          name: '王五',
          tel: 137777777,
          status: 0,
        },
      ],
      comTableMode: [
        {
          label: 'ID',
          mode: 'id',
          width: '60',
        },
        {
          label: '名字1',
          mode: 'name',
          width: '120',
          showOverflowTooltip: true,
        },
        {
          label: '电话',
          mode: 'tel',
        },
        {
          label: '状态',
          mode: 'status',
        },
      ],
      // 表格的配置（不针对行）
      comTableConfig: {}, -->

  <!-- 合计栏自定义函数

    function(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
              //合计头 index--显示在哪一列
              if (index === 1) {
                sums[index] = '合计';
                return;
              }

              const values = data.map(item => Number(item[column.property]));
              if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                    return prev + curr;
                  } else {
                    return prev;
                  }
                }, 0);
                //sums[index] += ' 元';
              } else {
                sums[index] = '';
              }
            });

            return sums;
          },
-->

  <div>
    <el-table
      :border="config.border"
      v-loading="config.loading"
      :data="list"
      :show-summary="config.showSummary"
      :summary-method="summaryMethod"
      :span-method="spanMethod"
      @select="handleCheckboxSelect"
    >
      <el-table-column
        :type="item.type"
        v-for="(item, index) in modes"
        :key="index"
        :label="item.label"
        :prop="item.mode"
        :width="item.width"
        class-name="testClass"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :sortable="item.sortable"
      >
        <!-- <template v-if="item.mode == 'status'" v-slot="item"> -->
        <template
          v-if="isSwitch(item.isSwitch) && item.mode == 'status'"
          v-slot="item"
        >
          <el-switch
            v-model="item.row.status"
            active-value="0"
            inactive-value="1"
            @change="handleStatusChange(item.row)"
          ></el-switch>
        </template>
      </el-table-column>

      <slot></slot>
    </el-table>

    <div v-if="paginations.isShowpagination" class="block mb20">
      <el-pagination
        :current-page="paginations.pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="paginations.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginations.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 分页
    pagination: {
      // 查询参数--分页
      // pageNum: 2, //第几页
      // pageSize: 3, // 总数 每页显示数
      type: Object,
      default: function () {
        return {
          // 是否显示分页器

          isShowpagination: true,
        };
      },
    },

    // 表格中其他属性所使用到的参数。
    config: {
      type: Object,
      default: () => ({
        border: false,
        label: "操作",
        width: "unset",
        loading: false,
        showSummary: false,
      }),
    },
    list: {
      type: Array,
    },
    modes: {
      label: "",
      mode: "",
      width: "",
      align: {
        type: String,
        default: "center",
      },
      showOverflowTooltip: {
        type: Boolean,
        default: false,
      },
      sortable: {
        type: [Boolean, String],
        default: false,
      },
    },
    summaryMethod: {
      type: Function,
      default: function (param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          //合计头 index--显示在哪一列
          if (index === 1) {
            sums[index] = "合计";
            return;
          }

          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            //sums[index] += ' 元';
          } else {
            sums[index] = "";
          }
        });

        return sums;
      },
    },
    spanMethod:{
      type:Function,
      default: ()=>{}
    }
  },
  data() {
    return {
      // pageSize: 5,
      // 遮罩层
      // loading: false,
      // status: 1,
    };
  },

  computed: {
    paginations() {
      return Object.assign(
        {
          isShowpagination: true,
        },
        this.pagination
      );
    },
    configs() {
      return Object.assign(
        {
          border: false,
          label: "操作",
          width: "unset",
          loading: false,
          showSummary: false,
        },
        this.config
      );
    },
    isSwitch() {
      return function (val) {
        if (val == undefined) {
          return true; //若不设置这默认为true
        } else {
          return val;
        }
      };
    },
  },
  mounted() {
    //console.log(this.params);
  },
  methods: {
    

    Fn(row) {
      this.$emit("EventgetCurrent", row);
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    // 当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
    handleCheckboxSelect(selection) {
      console.log("handleCheckboxSelect", selection);
      this.$emit("EventSelect", selection);
    },
    // 状态修改
    handleStatusChange(row) {
      // console.log(row);
      this.$emit("handleStatusChange", row);
    },

    //切换每页显示的条数  	pageSize 改变时会触发	每页条数
    handleSizeChange(value) {
      this.$emit("handleSizeChange", value);
    },
    // currentPage 改变时会触发	当前页
    handleCurrentChange(value) {
      this.$emit("handleCurrentChange", value);
    },
  },
};
</script>

<style lang="scss" scoped>
.operate {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}
::v-deep .testClass {
  width: 50px;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  word-break: break-all !important;
}
.block {
  display: flex;
  float: right;
  width: 100%;
  height: 60px;
  align-items: center;
  justify-content: flex-end;
  // margin: 20px 0px;
  // border: solid #cccc 1px;
}
</style>